<template>
  <el-cascader
    v-model="codes"
    :options="options"
    :props="props"
    placeholder="请选择退货地址"
    @expand-change="getNodes"
  />
</template>

<script>
import { getCountry } from '@/api/order'
export default {
  props: {
    provinceCityRegion: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      codes: [],
      props: {
        value: 'code',
        label: 'fullName',
        children: 'children'
      },
      addressData: {
        province: '',
        city: '',
        county: '',
        cityCode: '',
        provinceCode: '',
        countyCode: ''
      },
      provinces: [], // 省份列表
      citys: [], // 城市列表
      regions: [] // 地区列表
    }
  },
  watch: {
    codes() {
      this.addressData.provinceCode = this.codes[0]
      this.addressData.cityCode = this.codes[1]
      this.addressData.countyCode = this.codes[2]
      this.fillName()
    },
    provinceCityRegion: {
      async handler(newVal) {
        console.log(this.provinceCityRegion, 'provinceCityRegion')
        const { provinceCityRegion } = this
        if (provinceCityRegion.length) {
          await this.getProviceList()
          await this.getCityList(this.provinceCityRegion[0])
          await this.getAreaList(
            this.provinceCityRegion[0],
            this.provinceCityRegion[1]
          )
          this.codes = this.provinceCityRegion
        } else {
          this.codes = []
          this.getProviceList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 获取省份
    async getProviceList() {
      const { data } = await getCountry({ code: 0 })
      data.map(item => {
        this.$set(item, 'children', [])
        const disableCodes = ['71', '81', '82'] // 台湾 香港 澳门
        if (disableCodes.includes(item.code)) this.$set(item, 'disabled', true)
      })
      this.options = data
      this.provinces = data
    },
    // 获取城市
    async getCityList(code) {
      const { data = [] } = await getCountry({ code })
      data.map(item => {
        this.$set(item, 'children', [])
      })
      this.citys = data
      this.options.map((item, i) => {
        if (item.code === code) {
          item.children = data
        }
      })
    },
    // 获取地区
    async getAreaList(provinceId, cityId) {
      const { data = [] } = await getCountry({ code: cityId })
      this.regions = data
      this.options.map((item, i) => {
        if (item.code === provinceId) {
          item.children.map((city, idx) => {
            city.children = data
          })
        }
      })
    },
    getNodes(val) {
      // 获取城市（二级）
      if (val.length === 1) {
        this.getCityList(val[0])
        // 获取地区 （三级）
      } else if (val.length === 2) {
        this.getAreaList(val[0], val[1])
      }
    },
    /**
     * 根据省市区code码 查找省市区名字 province city county
     */
    fillName() {
      const { provinceCode, cityCode, countyCode } = this.addressData
      console.log(provinceCode, cityCode, countyCode)
      const { provinces, citys, regions } = this
      /* eslint-disable*/
      const P = _.find(provinces, { code: provinceCode });
      this.addressData.province = P ? P.fullName : "";
      /* eslint-disable*/
      const C = _.find(citys, { code: cityCode });
      this.addressData.city = C ? C.fullName : "";
      /* eslint-disable*/
      const R = _.find(regions, { code: countyCode });
      this.addressData.county = R ? R.fullName : "";
      //   console.log(this.provinces, "eeedd")
      console.log(this.addressData, "addressData");
      this.$emit("input", this.addressData);
      //   return this.addressData
    }
  }
};
</script>
<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
</style>
